<template>
  <div class="menu-bar">
    <transition name="slide-up">
      <div class="menu-wrapper" v-if="ifTitleAndMenuShow" :class="{'hide-box-shadow' : ifSettingShowFont || ifTitleAndMenuShow}">
        <div class="icon-wrapper">
          <span class="icon-menu icon"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-progress icon"></span>
        </div>
        <div class="icon-wrapper">
          <span class="icon-bright icon"></span>
        </div>
        <div class="icon-wrapper" @click="showFontSetting">
          <span class="icon-a icon">A</span>
        </div>
      </div>
    </transition>
    <transition name="slide-up">
      <div class="setting-wrapper" v-show="ifSettingShowFont">
        <div class="setting-font-size"></div>
      </div>
    </transition>
  </div>
</template>

<script>
    export default {
        name: "MenuBar",
        props:{
            ifTitleAndMenuShow: {
                request: Boolean,
                default: false
            }
        },
        data() {
            return {
                ifSettingShowFont: false
            }
        },
        methods:{
            showFontSetting(){
                this.ifSettingShowFont = !this.ifSettingShowFont
            },
            hideSetting (){
                this.ifSettingShowFont = false
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../assets/styles/global";
  .menu-bar{
    .menu-wrapper{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: px2rem(48);
      z-index: 101;
      display: flex;
      background-color: white;
      box-shadow: 0 px2rem(-8) px2rem(8) rgba(0,0,0,.15); // 水平 垂直 模糊  颜色 透明度
      &.hide-box-shadow{
        box-shadow: none;
      }
      .icon-wrapper{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-progress{
          font-size: px2rem(28);
        }
        .icon-bright{
          font-size: px2rem(24);
        }
      }
    }
    .setting-wrapper{
      position: absolute;
      bottom: px2rem(18);
      left: 0;
      width: 100%;
      height: px2rem(60);
      background-color: white;
      box-shadow: 0 px2rem(-8) px2rem(8) rgba(0,0,0,.15);
      .setting-font-size{

      }
    }
  }

</style>
